

<template>
  <div>
    <basic-container>
      <el-tabs v-model="activeName" @tab-click="handleList">
        <el-tab-pane label="未读公告" name="first">
          <avue-crud
            :option="tableOption"
            :data="tableData"
            :table-loading="tableLoading"
            :page="page"
            ref="crud"
            @size-change="sizeChange"
            @current-change="currentChange"
            @refresh-change="handleList"
          >
            <template slot-scope="scope" slot="title">
              <a style="color:blue" @click="handleShow(scope.row)">{{scope.row.title}}</a>
            </template>
          </avue-crud>
        </el-tab-pane>
        <el-tab-pane label="已读公告" name="second">
          <avue-crud
            :option="tableOption"
            :data="tableData"
            :table-loading="tableLoading"
            :page="page"
            ref="crud"
            @size-change="sizeChange"
            @current-change="currentChange"
            @refresh-change="handleList"
          >
            <template slot-scope="scope" slot="title">
              <a style="color:blue" @click="handleShow(scope.row)">{{scope.row.title}}</a>
            </template>
          </avue-crud>
        </el-tab-pane>
      </el-tabs>

      <el-dialog class="notice" :title="'标题：'+notice.title" :visible.sync="showDia" width="60%" :before-close="handleClose">
        <div v-html="notice.content"></div>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
/* eslint-disable */
import { mapGetters } from "vuex";
import crudMixin from '@/mixins/crud'
import options from "./options.js";
import { isNull, arr2pojo, obj2pojo, validateResponse } from "@/util/util";
import { successMsg, errorMsg } from "@/util/message"
import { baseUrl } from '@/config/env'
import request from '@/router/axios'
import { uploadUrl, dictUrl } from '@/config/env'

export default {
  name: "role",
  mixins: [crudMixin],
  components: {
  },
  data() {
    return Object.assign({}, options, {
      activeName: 'first',
      showDia: false,
      notice:''
    })
  },
  created() {
    this.handleList()
  },
  watch: {},
  mounted() { },
  computed: {
    ...mapGetters([
      "userInfo"
    ]),
  },
  props: [],
  methods: {
    handleList() {
      let params = {}
      if (this.activeName == 'first')
      {
        params.read = 2
      }
      if (this.activeName == 'second')
      {
        params.read = 1
      }

      request.get(baseUrl + '/notices/index', { params: params })
        .then(
          res => {
            if (res.data.status == 1)            {
              let _data = res.data.result.data || []
              let _meta = res.data.result.meta || []

              this.tableData = _data || [];
              this.page.total = _meta.total;
            }
          })
    },
    handleShow(row){
      let params = {id:row.id}
      request.get(baseUrl + '/notices/show', { params: params })
        .then(
          res => {
            if (res.data.status == 1)            {
              this.notice = res.data.result.data
              this.showDia = true

              //直接修改notice_count
               localStorage.setItem('notice_count', this.notice.notice_count)
               this.userInfo.userData.notice_count = this.notice.notice_count
            }
          })
    },
    handleClose() {
      this.notice = ''
      this.showDia = false
    }
  }
};
</script>

<style>


.notice .el-dialog__header {
  border-bottom: 1px solid #eeeeee;
}
</style>

